<template>
  <view class="category-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        placeholder="搜索分类或书籍" 
        placeholder-class="placeholder"
        @confirm="onSearch"
      />
      <image 
        src="https://img.icons8.com/ios/50/000000/search.png" 
        class="search-icon"
      />
    </view>

    <!-- 分类导航 -->
    <scroll-view scroll-y class="category-container">
      <!-- 主分类 -->
      <view 
        v-for="(category, index) in categories" 
        :key="index"
        class="main-category"
      >
        <!-- 主分类标题 -->
        <view 
          class="main-category-header"
          @click="toggleSubCategory(index)"
        >
          <image :src="category.icon" class="category-icon" />
          <text class="category-title">{{ category.name }}</text>
          <text class="arrow">{{ category.expanded ? '▼' : '▶' }}</text>
        </view>

        <!-- 子分类 -->
        <view 
          v-if="category.expanded" 
          class="sub-category"
        >
          <view 
            v-for="(sub, subIndex) in category.children" 
            :key="subIndex"
            class="sub-item"
            @click="goToBookList(category.name, sub)"
          >
            {{ sub }}
          </view>
        </view>

        <!-- 推荐书籍 -->
        <view 
          v-if="category.expanded" 
          class="recommend-books"
        >
          <scroll-view scroll-x>
            <view 
              v-for="(book, bookIndex) in category.recommend" 
              :key="bookIndex"
              class="book-card"
              @click="goToBookDetail(book)"
            >
              <image :src="book.cover" class="book-cover" />
              <text class="book-title">{{ book.title }}</text>
              <text class="book-author">{{ book.author }}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          name: '文学小说',
          icon: 'https://img.icons8.com/ios/50/000000/book.png',
          expanded: false,
          children: ['现代文学', '古典文学', '外国文学'],
          recommend: [
            { 
              cover: 'https://picsum.photos/200/300?random=21', 
              title: '百年孤独', 
              author: '加西亚·马尔克斯' 
            },
            { 
              cover: 'https://picsum.photos/200/300?random=22', 
              title: '活着', 
              author: '余华' 
            }
          ]
        },
        {
          name: '科技互联网',
          icon: 'https://img.icons8.com/ios/50/000000/laptop.png',
          expanded: false,
          children: ['人工智能', '编程开发', '数据科学'],
          recommend: [
            { 
              cover: 'https://picsum.photos/200/300?random=23', 
              title: 'Python编程', 
              author: 'John Smith' 
            },
            { 
              cover: 'https://picsum.photos/200/300?random=24', 
              title: '机器学习实战', 
              author: 'Jane Doe' 
            }
          ]
        }
        // 其他分类...
      ]
    }
  },
  methods: {
    toggleSubCategory(index) {
      this.categories[index].expanded = !this.categories[index].expanded
      this.$forceUpdate()
    },
    goToBookList(category, sub) {
      uni.navigateTo({
        url: `/pages/book-list/book-list?category=${category}&sub=${sub}`
      })
    },
    onSearch(e) {
      const keyword = e.detail.value
      uni.navigateTo({
        url: `/pages/search-result/search-result?keyword=${keyword}`
      })
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.category-page {
  padding: 20rpx;
  background-color: #f5f5f5;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 50rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.search-bar input {
  flex: 1;
  font-size: 28rpx;
  margin-left: 20rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
}

.placeholder {
  color: #999;
}

/* 主分类 */
.main-category {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.main-category-header {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.category-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.category-title {
  font-size: 32rpx;
  font-weight: bold;
  flex: 1;
}

.arrow {
  font-size: 28rpx;
  color: #999;
}

/* 子分类 */
.sub-category {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}

.sub-item {
  background-color: #f5f5f5;
  border-radius: 50rpx;
  padding: 10rpx 20rpx;
  margin: 10rpx;
  font-size: 28rpx;
  color: #666;
}

/* 推荐书籍 */
.recommend-books {
  padding: 20rpx;
}

.book-card {
  display: inline-block;
  width: 200rpx;
  margin-right: 20rpx;
}

.book-cover {
  width: 200rpx;
  height: 280rpx;
  border-radius: 10rpx;
}

.book-title {
  display: block;
  font-size: 28rpx;
  margin-top: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-author {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 5rpx;
}
</style>